<template>
	<view class="replyLayout">
		<z-paging ref="paging" v-model="replyList" @query="queryList" empty-view-text="抢先回复"
			empty-view-img="http://cdn.uviewui.com/uview/empty/comment.png">
			<view class="outer">
				<view class="body">
					<comment-item :item="currentReply" :toplevel="true"></comment-item>
				</view>
				<view class="list">
					<view class="row" v-for="item in replyList" :key="item._id">
						<comment-item :item="item" :reply="true" @reply="clickComment"></comment-item>
					</view>
				</view>
				<view v-if="!replyList.length && !noData" style="padding:60rpx">
					<uni-load-more status="loading" :showText="false"></uni-load-more>
				</view>

			</view>

			<template #bottom>
				<view class="replyBar" @click="clickReply">
					<view class="out">
						<view class="left">发一条友好的评论吧</view>
						<view class="right">
							<uni-icons type="paperplane" size="26" color="#333"></uni-icons>
						</view>
					</view>
					<view class="safe-area-bottom" :style="{background:'#fff'}"></view>
				</view>
			</template>
		</z-paging>
	</view>

	<uni-popup type="bottom" ref="commentPopup">
		<comment-reply ref="commentRef" :source="source" @success="replySuccess"></comment-reply>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		nextTick
	} from 'vue';
	import {
		onUnload
	} from "@dcloudio/uni-app"
	import {
		showToast
	} from '../../utils/common';
	const currentReply = ref(uni.getStorageSync("currentReply") || {});
	const current_id = uniCloud.getCurrentUserInfo().uid;
	const commentPopup = ref(null);
	const paging = ref(null);
	const db = uniCloud.database();
	const dbCmd = db.command;
	const $ = dbCmd.aggregate;
	const replyList = ref([]);
	const noData = ref(false);

	//数据
	const source = ref({
		soup_id: currentReply.value.soup_id,
		comment_type: 1,
		reply_parent_id: currentReply.value._id,
		reply_user_id: currentReply.value.userInfo._id,
		reply_comment_id: currentReply.value._id,
		reply_user_name: currentReply.value.userInfo.username
	});
	const commentRef = ref(null);
	const queryList = (pageNo, pageSize) => {
		getReply(pageNo, pageSize)
	}

	uni.$on("commentRemove", () => {
		nextTick(() => {
			paging.value.refresh();
		})
	})
	//获取回复的信息
	const getReply = async (pageNo, pageSize) => {
		let skip = (pageNo - 1) * pageSize;
		let {
			result: {
				errCode,
				data
			}
		} = await db.collection("soup-comments").aggregate()
			.match({
				soup_id: currentReply.value.soup_id,
				comment_type: 1,
				reply_parent_id: currentReply.value._id
			})
			.lookup({
				from: "uni-id-users",
				let: {
					uid: '$user_id'
				},
				pipeline: $.pipeline().match(dbCmd.expr($.eq(['$_id', '$$uid']))).project({
					username: 1,
					avatar: 1
				}).done(),
				as: "userInfo"
			})
			.lookup({
				from: "soup-comments",
				let: {
					reply_comment_id: '$reply_comment_id',
					reply_parent_id: '$reply_parent_id'
				},
				pipeline: $.pipeline()
					.match(dbCmd.expr(
						$.and([
							$.neq(["$$reply_comment_id", "$$reply_parent_id"]),
							$.eq(['$_id', '$$reply_comment_id'])
						])
					))
					.lookup({
						from: "uni-id-users",
						let: {
							uid: '$user_id'
						},
						pipeline: $.pipeline().match(dbCmd.expr($.eq(['$_id', '$$uid']))).project({
							username: 1
						}).done(),
						as: "userInfo"
					})
					.project({
						comment_content: $.cond({
							if: $.eq(['$is_delete', true]),
							then: "已被删除",
							else: '$comment_content'
						}),
						userInfo: $.arrayElemAt(['$userInfo', 0])
					}).done(),
				as: "replyInfo"
			})
			.lookup({
				from: "soup-like",
				let: {
					commentID: '$_id'
				},
				pipeline: $.pipeline().match(
						dbCmd.expr(
							$.and([
								$.eq([currentReply.value.soup_id, '$soup_id']),
								$.eq(['$$commentID', '$comment_id']),
								$.eq(['$user_id', current_id])
							])
						)).count('length')
					.done(),
				as: "likeState"
			})
			.sort({
				comment_date: -1 //按时间倒序排列
			})
			.skip(skip)
			.limit(pageSize)
			.project({
				is_delete: 1,
				isLike: $.cond({
					if: $.gt([$.arrayElemAt(['$likeState.length', 0]), 0]),
					then: true,
					else: false
				}),
				like_count: 1,
				comment_count: 1,
				comment_type: 1,
				comment_content: $.cond({
					if: $.eq(['$is_delete', true]),
					then: "已被删除",
					else: '$comment_content'
				}),
				soup_id: 1,
				comment_date: 1,
				userInfo: $.arrayElemAt(['$userInfo', 0]),
				replyInfo: $.arrayElemAt(['$replyInfo', 0]),
			})
			.end();
		console.log(data);
		paging.value.complete(data);
		if (data.length == 0) noData.value = true;
	}


	//点击回复的方法
	const clickReply = () => {
		commentPopup.value.open();
		commentRef.value.focusFn();
	}

	//点击评论的方法
	const clickComment = (e) => {
		clickReply(); //点击出现回复的弹出框
		source.value = {
			...source.value,
			reply_user_id: e.userInfo._id,
			reply_comment_id: e._id,
			reply_user_name: e.userInfo.username
		}
	}


	//发布成功后的回调
	const replySuccess = () => {
		showToast("发布成功")
		commentPopup.value.close();
		paging.value.refresh();
		//回复成功之后数据初始化
		source.value = {
			...source.value,
			reply_user_id: currentReply.value.userInfo._id,
			reply_comment_id: currentReply.value._id,
			reply_user_name: currentReply.value.userInfo.username
		}
	}

	//销毁
	onUnload(() => {
		uni.removeStorageSync("currentReply")
	})
</script>

<style lang="scss" scoped>
	.replyLayout {
		.body {
			padding: 30rpx 0;
			border-bottom: 12rpx solid #F7F7F7;
		}

		.list {
			.row {
				border-bottom: 1px solid #F7F7F7;
			}
		}

		.replyBar {
			padding: 30rpx;
			border-top: 2rpx solid #e4e4e4;
			background: #fff;

			.out {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					flex: 1;
					height: 70rpx;
					background: #f7f7f7;
					border-radius: 70rpx;
					padding: 0 20rpx;
					display: flex;
					align-items: center;
					color: #999;
					margin-right: 30rpx;
				}
			}
		}
	}
</style>